import React, { useState, useEffect } from 'react';
import { history } from 'umi';
import { Swiper, CountDown, Sticky, Card } from 'react-vant';
import { ArrowLeft } from '@react-vant/icons';
import './css/xiang.css';

export default function xiangxi() {
  const [dataimg, setdataimg] = useState([history.location.state]);
  console.log(dataimg, '我获取到的数据');

  const [show, setshow] = useState(false);

  const imgslist2 = [
    { id: 1, img: '5.png' },
    { id: 2, img: '6.png' },
  ];

  // 用来监听页面滚动
  useEffect(() => {
    window.addEventListener('scroll', loging);
  }, []);
  const loging = () => {
    let htmltop = document.documentElement || document.body; //页面到顶部的距离
    if (htmltop.scrollTop >= 100) {
      setshow(true);
    } else {
      setshow(false);
    }
  };

  const fan = () => {
    history.push('/index/dui');
  };

  return (
    <div className="bodys" style={{}}>
      <div style={{ background: '#eefcfe' }}>
        {show ? (
          <Sticky>
            <div style={{ background: '#2bcddd', height: '50px' }}>
              <ArrowLeft
                style={{
                  color: '#fff',
                  fontSize: '30px',
                  lineHeight: '50px',
                  verticalAlign: 'middle',
                }}
                onClick={fan}
              />

              <h2
                style={{
                  color: '#fff',
                  lineHeight: '50px',
                  fontWeight: 'bold',
                  display: 'inline-block',
                  marginBottom: 0,
                  verticalAlign: 'middle',
                }}
              >
                商品详情
              </h2>
            </div>
          </Sticky>
        ) : (
          ''
        )}

        {dataimg.map((item) => (
          <div key={item._id}>
            <div style={{ width: '100%' }}>
              <Swiper autoplay={5000}>
                {item.imgss.map((item, index) => (
                  <Swiper.Item key={index}>
                    <div>
                      <div
                        style={{
                          background: '#e3e3e3',
                          width: '30px',
                          height: '30px',
                          borderRadius: '50%',
                          textAlign: 'center',
                          lineHeight: '35px',
                          position: 'absolute',
                          float: 'left',
                          top: '15px',
                          left: '15px',
                          opacity: '0.7',
                        }}
                        onClick={fan}
                      >
                        <ArrowLeft />
                      </div>
                      <div>
                        <img
                          src={item}
                          alt=""
                          style={{
                            width: '100%',
                            height: '300px',
                          }}
                        />
                      </div>
                    </div>
                  </Swiper.Item>
                ))}
              </Swiper>
            </div>

            <Card
              style={{
                height: '130px',
                paddingTop: '8px',
                paddingLeft: '20px',
                paddingRight: '25px',
              }}
            >
              <p
                style={{
                  fontSize: '15px',
                }}
              >
                {item.xiangqing}
              </p>
              <p
                style={{
                  color: 'red',
                  fontSize: '20px',
                  display: 'inline-block',
                  verticalAlign: 'middle',
                }}
              >
                {item.price}币
              </p>
              <s style={{ display: 'inline-block', marginLeft: '15px' }}>
                {item.yuanprice}
              </s>
              <div style={{}}>
                <span>距离抢购结束：</span>
                <CountDown
                  time={30 * 60 * 60 * 1000}
                  style={{ display: 'inline-block' }}
                />
              </div>
            </Card>
          </div>
        ))}

        <Card style={{ marginTop: '10px' }}>
          <Card.Body style={{ height: '150px' }}>
            <div>
              <h2
                style={{
                  borderLeft: '3px solid red',
                  paddingLeft: '15px',
                  fontWeight: 'bolder',
                }}
              >
                服务详情
              </h2>
            </div>
            <div style={{ display: 'inline-block', marginRight: '30px' }}>
              <p style={{ fontWeight: 'bolder' }}>服务</p>
              <p style={{ fontWeight: 'bolder' }}>说明</p>
              <p style={{ fontWeight: 'bolder' }}>选择</p>
            </div>
            <div style={{ display: 'inline-block' }}>
              <p style={{ fontWeight: 'bolder' }}>24小时内送货 · 15天退货</p>
              <p style={{ fontWeight: 'bolder' }}>假一赔十 丨 7天无理由退货</p>
              <p
                style={{
                  color: 'red',
                  cursor: 'pointer',
                  fontWeight: 'bolder',
                }}
              >
                淡金色 【10cm】
              </p>
            </div>
          </Card.Body>
        </Card>
        <Card style={{ marginTop: '10px' }}>
          <Card.Body style={{ height: '150px' }}>
            <div>
              <h2
                style={{
                  borderLeft: '3px solid red',
                  paddingLeft: '15px',
                  fontWeight: 'bolder',
                }}
              >
                服务详情
              </h2>
            </div>
            <div style={{ display: 'inline-block', marginRight: '30px' }}>
              <p style={{ fontWeight: 'bolder' }}>服务</p>
              <p style={{ fontWeight: 'bolder' }}>说明</p>
              <p style={{ fontWeight: 'bolder' }}>选择</p>
            </div>
            <div style={{ display: 'inline-block' }}>
              <p style={{ fontWeight: 'bolder' }}>24小时内送货 · 15天退货</p>
              <p style={{ fontWeight: 'bolder' }}>假一赔十 丨 7天无理由退货</p>
              <p
                style={{
                  color: 'red',
                  cursor: 'pointer',
                  fontWeight: 'bolder',
                }}
              >
                淡金色 【10cm】
              </p>
            </div>
          </Card.Body>
        </Card>
        <Card style={{ marginTop: '10px' }}>
          <Card.Body style={{ height: '150px' }}>
            <div>
              <h2
                style={{
                  borderLeft: '3px solid red',
                  paddingLeft: '15px',
                  fontWeight: 'bolder',
                }}
              >
                服务详情
              </h2>
            </div>
            <div style={{ display: 'inline-block', marginRight: '30px' }}>
              <p style={{ fontWeight: 'bolder' }}>服务</p>
              <p style={{ fontWeight: 'bolder' }}>说明</p>
              <p style={{ fontWeight: 'bolder' }}>选择</p>
            </div>
            <div style={{ display: 'inline-block' }}>
              <p style={{ fontWeight: 'bolder' }}>24小时内送货 · 15天退货</p>
              <p style={{ fontWeight: 'bolder' }}>假一赔十 丨 7天无理由退货</p>
              <p
                style={{
                  color: 'red',
                  cursor: 'pointer',
                  fontWeight: 'bolder',
                }}
              >
                淡金色 【10cm】
              </p>
            </div>
          </Card.Body>
        </Card>
      </div>
    </div>
  );
}
